<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Calendar, StarFilled, Star, Share, LocationFilled, MapLocation } from "@element-plus/icons-vue";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const hireId = ref("");
const isCollected = ref(false);

// 校园招聘详情数据
const hireDetail = ref({
    id: "1",
    title: "2023秋季校园招聘宣讲会",
    startTime: "2023-11-15T14:00:00",
    endTime: "2023-11-15T17:00:00",
    location: "北京市海淀区清华大学就业中心",
    mode: "线下宣讲",
    status: "upcoming", // upcoming, ongoing, ended
    tags: ["互联网", "名企"],
    targetSchools: ["清华大学", "北京大学"],
    targetMajors: ["计算机科学", "软件工程"],
    description: `<p>本次宣讲会将介绍公司2024届校园招聘计划，包括公司概况、产品方向、招聘岗位、薪资福利等信息。宣讲会后有提问环节和简历投递机会。</p>
<p>请有意向的同学携带简历准时参加！</p>`,
    company: {
        id: "101",
        name: "科技互联网有限公司",
        logo: "https://via.placeholder.com/60",
        industry: "互联网/IT",
        size: "10000人以上",
        funding: "C轮",
        homepage: "https://www.example.com",
        introduction: `公司是中国最大的互联网综合服务提供商之一，也是中国最大的互联网公司之一。成立于1998年11月，总部位于中国深圳南山区。业务包括社交和通信服务、游戏、数字内容、广告、云计算和金融科技。`,
    },
    hrInfo: {
        name: "李女士",
        position: "校园招聘HR",
        activeTime: "刚刚活跃",
    },
    positions: [
        {
            name: "后端开发工程师",
            count: 20,
            workLocation: "北京/深圳/上海",
            education: "本科及以上",
            majors: ["计算机科学", "软件工程"],
            description: "负责公司核心业务的后端系统开发和维护，包括高并发、分布式系统的设计和实现。",
            requirements: `1. 熟悉至少一种编程语言，如C++/Java/Go等；
2. 了解常用数据结构和算法；
3. 了解计算机网络、操作系统等基础知识；
4. 有互联网、游戏行业相关经验者优先`,
        },
        {
            name: "前端开发工程师",
            count: 15,
            workLocation: "北京/深圳/上海",
            education: "本科及以上",
            majors: ["计算机科学", "软件工程", "网络工程"],
            description: "负责产品的Web/移动端界面开发，与设计师、后端工程师合作打造优秀的用户体验。",
            requirements: `1. 熟悉HTML/CSS/JavaScript等前端技术；
2. 了解至少一种主流前端框架，如React/Vue/Angular；
3. 有良好的设计感和用户体验意识；
4. 有移动端开发经验者优先`,
        },
        {
            name: "产品经理",
            count: 10,
            workLocation: "北京/深圳/上海",
            education: "本科及以上",
            majors: ["计算机科学", "软件工程", "市场营销", "工商管理"],
            description: "负责产品的需求分析、功能规划、用户研究等工作，推动产品不断迭代优化。",
            requirements: `1. 对互联网产品有浓厚兴趣，善于分析用户需求；
2. 有良好的沟通能力和团队协作精神；
3. 能够独立思考，有创新意识；
4. 有产品设计或开发经验者优先`,
        },
    ],
    relatedEvents: [
        {
            id: "2",
            title: "2023秋季校园招聘",
            companyName: "阿里巴巴",
            companyLogo: "https://via.placeholder.com/40",
            startTime: "2023-11-20T10:00:00",
            mode: "线下宣讲",
            tags: ["互联网", "电商"],
        },
        {
            id: "3",
            title: "技术类专场招聘会",
            companyName: "华为技术",
            companyLogo: "https://via.placeholder.com/40",
            startTime: "2023-11-25T09:30:00",
            mode: "在线宣讲",
            tags: ["通信", "互联网", "硬件"],
        },
        {
            id: "4",
            title: "金融科技招聘会",
            companyName: "招商银行",
            companyLogo: "https://via.placeholder.com/40",
            startTime: "2023-11-28T14:00:00",
            mode: "线下宣讲",
            tags: ["金融", "科技"],
        },
    ],
});

// 处理收藏
const toggleCollect = () => {
    isCollected.value = !isCollected.value;
    ElMessage({
        message: isCollected.value ? "已收藏" : "已取消收藏",
        type: "success",
    });
};

// 处理报名参加
const applyHire = () => {
    ElMessage({
        message: "报名成功！",
        type: "success",
    });
};

// 处理设置提醒
const setReminder = () => {
    ElMessage({
        message: "已设置提醒",
        type: "success",
    });
};

// 处理活动分享
const shareHire = () => {
    ElMessage({
        message: "分享链接已复制到剪贴板",
        type: "success",
    });
};

// 格式化日期
const formatDateTime = (dateTimeStr) => {
    const date = new Date(dateTimeStr);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");

    return `${year}年${month}月${day}日 ${hours}:${minutes}`;
};

// 计算活动状态
const getStatusType = (status) => {
    switch (status) {
        case "upcoming":
            return "primary";
        case "ongoing":
            return "success";
        case "ended":
            return "info";
        default:
            return "info";
    }
};

const getStatusText = (status) => {
    switch (status) {
        case "upcoming":
            return "即将开始";
        case "ongoing":
            return "进行中";
        case "ended":
            return "已结束";
        default:
            return "未知状态";
    }
};

// 跳转到公司详情页
const goToCompanyInfo = () => {
    router.push({
        path: "/companyInfo",
        query: { id: hireDetail.value.company.id },
    });
};

onMounted(() => {
    // 从路由获取招聘活动ID
    hireId.value = (route.query.id as string) || "1";

    // 这里应该使用实际API获取招聘活动详情，现在使用模拟数据
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        // hireDetail.value = 实际API返回数据
    }, 500);
});
</script>

<template>
    <div class="hire-info-page">
        <headerIndex />

        <el-main class="main-content">
            <el-skeleton :loading="loading" animated :rows="10" v-if="loading"> </el-skeleton>

            <template v-else>
                <!-- 招聘活动基本信息区域 -->
                <el-card class="hire-header" shadow="never">
                    <div class="hire-header-content">
                        <div class="hire-title-section">
                            <div class="hire-title-wrap">
                                <h1 class="hire-title">{{ hireDetail.title }}</h1>
                                <el-tag :type="getStatusType(hireDetail.status)" class="status-tag">
                                    {{ getStatusText(hireDetail.status) }}
                                </el-tag>
                            </div>
                            <div class="hire-action-buttons">
                                <el-button type="primary" @click="applyHire" class="apply-button"> 报名参加 </el-button>
                                <div class="action-items">
                                    <el-button :icon="Calendar" @click="setReminder" circle />
                                    <el-button
                                        :icon="isCollected ? StarFilled : Star"
                                        circle
                                        @click="toggleCollect"
                                        :class="{ collected: isCollected }"
                                    />
                                    <el-button :icon="Share" circle @click="shareHire" />
                                </div>
                            </div>
                        </div>

                        <div class="hire-meta">
                            <div class="meta-row">
                                <el-icon><Calendar /></el-icon>
                                <span
                                    >时间：{{ formatDateTime(hireDetail.startTime) }} -
                                    {{ formatDateTime(hireDetail.endTime).split(" ")[1] }}</span
                                >
                            </div>
                            <div class="meta-row">
                                <el-icon><LocationFilled /></el-icon>
                                <span>地点：{{ hireDetail.location }}</span>
                            </div>
                            <div class="meta-row">
                                <span>招聘方式：{{ hireDetail.mode }}</span>
                            </div>
                        </div>

                        <div class="hire-tags">
                            <el-tag
                                v-for="(tag, index) in hireDetail.tags"
                                :key="index"
                                effect="plain"
                                class="hire-tag"
                                >{{ tag }}</el-tag
                            >
                        </div>

                        <div class="company-info-brief">
                            <div class="company-logo">
                                <el-avatar :size="60" :src="hireDetail.company.logo" />
                            </div>
                            <div class="company-brief">
                                <h3 class="company-name" @click="goToCompanyInfo" style="cursor: pointer">
                                    {{ hireDetail.company.name }}
                                </h3>
                                <div class="company-meta">
                                    <span>{{ hireDetail.company.funding }}</span>
                                    <span class="divider">|</span>
                                    <span>{{ hireDetail.company.industry }}</span>
                                    <span class="divider">|</span>
                                    <span>{{ hireDetail.company.size }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 招聘活动详情区域 -->
                <el-row :gutter="20" class="hire-detail-container">
                    <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                        <!-- 活动描述 -->
                        <el-card class="hire-description-card content-card" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span>活动描述</span>
                                </div>
                            </template>
                            <div class="hire-description" v-html="hireDetail.description"></div>

                            <div class="target-info">
                                <div class="target-schools">
                                    <h4>目标院校</h4>
                                    <div class="target-tags">
                                        <el-tag
                                            v-for="(school, index) in hireDetail.targetSchools"
                                            :key="index"
                                            effect="light"
                                        >
                                            {{ school }}
                                        </el-tag>
                                    </div>
                                </div>
                                <div class="target-majors">
                                    <h4>目标专业</h4>
                                    <div class="target-tags">
                                        <el-tag
                                            v-for="(major, index) in hireDetail.targetMajors"
                                            :key="index"
                                            effect="light"
                                            type="success"
                                        >
                                            {{ major }}
                                        </el-tag>
                                    </div>
                                </div>
                            </div>
                        </el-card>

                        <!-- 招聘岗位列表 -->
                        <el-card class="hire-positions-card content-card" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span>招聘岗位</span>
                                </div>
                            </template>
                            <div class="positions-list">
                                <el-collapse accordion>
                                    <el-collapse-item
                                        v-for="(position, index) in hireDetail.positions"
                                        :key="index"
                                        :title="position.name + ' (' + position.count + '人)'"
                                        :name="index"
                                    >
                                        <div class="position-details">
                                            <div class="position-item">
                                                <div class="item-label">工作地点</div>
                                                <div class="item-content">{{ position.workLocation }}</div>
                                            </div>
                                            <div class="position-item">
                                                <div class="item-label">学历要求</div>
                                                <div class="item-content">{{ position.education }}</div>
                                            </div>
                                            <div class="position-item">
                                                <div class="item-label">专业要求</div>
                                                <div class="item-content">
                                                    <el-tag
                                                        v-for="(major, mIndex) in position.majors"
                                                        :key="mIndex"
                                                        size="small"
                                                        effect="plain"
                                                        class="major-tag"
                                                    >
                                                        {{ major }}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="position-item">
                                                <div class="item-label">岗位描述</div>
                                                <div class="item-content">{{ position.description }}</div>
                                            </div>
                                            <div class="position-item">
                                                <div class="item-label">岗位要求</div>
                                                <div class="item-content requirements">
                                                    {{ position.requirements }}
                                                </div>
                                            </div>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-card>

                        <!-- 公司介绍 -->
                        <el-card class="company-info-card content-card" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span>公司介绍</span>
                                </div>
                            </template>
                            <div class="company-intro">{{ hireDetail.company.introduction }}</div>
                        </el-card>

                        <!-- 活动地点 -->
                        <el-card class="hire-location-card content-card" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span>活动地址</span>
                                </div>
                            </template>
                            <div class="address-info">
                                <el-icon><MapLocation /></el-icon>
                                <span>{{ hireDetail.location }}</span>
                            </div>
                            <div class="map-container">
                                <!-- 这里应放置地图组件 -->
                                <div class="map-placeholder">
                                    <el-image src="https://via.placeholder.com/600x300?text=地图" fit="cover" />
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <!-- 右侧信息栏 -->
                    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                        <!-- 报名参加模块 -->
                        <el-card class="apply-card sidebar-card" shadow="hover">
                            <div class="apply-container">
                                <div class="hr-info">
                                    <el-avatar :size="40" src="https://via.placeholder.com/40" class="hr-avatar" />
                                    <div class="hr-details">
                                        <div class="hr-name">{{ hireDetail.hrInfo.name }}</div>
                                        <div class="hr-position">{{ hireDetail.hrInfo.position }}</div>
                                    </div>
                                    <div class="hr-status">{{ hireDetail.hrInfo.activeTime }}</div>
                                </div>

                                <div class="apply-options">
                                    <el-checkbox v-model="isCollected">收藏该招聘会</el-checkbox>
                                </div>

                                <div class="apply-button-container">
                                    <el-button type="primary" @click="applyHire" class="full-width-button"
                                        >报名参加</el-button
                                    >
                                    <el-button @click="setReminder" class="full-width-button reminder-btn">
                                        <el-icon><Calendar /></el-icon>设置提醒
                                    </el-button>
                                </div>
                            </div>
                        </el-card>

                        <!-- 相关招聘活动 -->
                        <el-card class="related-events-card sidebar-card" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span>相关招聘活动</span>
                                </div>
                            </template>
                            <div class="related-events-list">
                                <div
                                    v-for="event in hireDetail.relatedEvents"
                                    :key="event.id"
                                    class="related-event-item"
                                    @click="router.push(`/schoolHireInfo?id=${event.id}`)"
                                >
                                    <div class="event-company">
                                        <el-avatar :size="30" :src="event.companyLogo" />
                                        <span class="company-name">{{ event.companyName }}</span>
                                    </div>
                                    <div class="event-title">{{ event.title }}</div>
                                    <div class="event-meta">
                                        <div class="event-time">
                                            <el-icon><Calendar /></el-icon>
                                            {{ new Date(event.startTime).toLocaleDateString() }}
                                        </div>
                                        <div class="event-mode">{{ event.mode }}</div>
                                    </div>
                                    <div class="event-tags">
                                        <el-tag
                                            v-for="(tag, index) in event.tags"
                                            :key="index"
                                            size="small"
                                            effect="plain"
                                            class="event-tag"
                                        >
                                            {{ tag }}
                                        </el-tag>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </template>
        </el-main>

        <footerIndex />
    </div>
</template>

<style scoped lang="less">
.hire-info-page {
    background-color: #f6f6f8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}

.hire-header {
    margin-bottom: 20px;

    .hire-header-content {
        padding: 10px 0;
    }

    .hire-title-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .hire-title-wrap {
            display: flex;
            align-items: center;

            .hire-title {
                font-size: 24px;
                font-weight: 600;
                margin: 0;
                margin-right: 15px;
            }

            .status-tag {
                font-size: 14px;
            }
        }

        .hire-action-buttons {
            display: flex;
            align-items: center;

            .apply-button {
                margin-right: 15px;
            }

            .action-items {
                display: flex;
                gap: 10px;

                .collected {
                    color: #ff9800;
                }
            }
        }
    }

    .hire-meta {
        margin-bottom: 15px;

        .meta-row {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            color: #606266;

            .el-icon {
                margin-right: 8px;
                color: #409eff;
            }
        }
    }

    .hire-tags {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;

        .hire-tag {
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }

    .company-info-brief {
        display: flex;
        align-items: center;
        border-top: 1px solid #eee;
        padding-top: 15px;

        .company-logo {
            margin-right: 15px;
        }

        .company-brief {
            .company-name {
                font-size: 16px;
                font-weight: 600;
                margin: 0 0 5px 0;
            }

            .company-name:hover {
                color: #409eff;
                text-decoration: underline;
            }

            .company-meta {
                font-size: 14px;
                color: #666;

                .divider {
                    margin: 0 8px;
                    color: #ddd;
                }
            }
        }
    }
}

.hire-detail-container {
    margin-bottom: 30px;
}

.content-card {
    margin-bottom: 20px;

    .card-header {
        font-size: 18px;
        font-weight: 600;
    }

    &.hire-description-card {
        .hire-description {
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .target-info {
            border-top: 1px dashed #eee;
            padding-top: 15px;

            h4 {
                font-size: 16px;
                margin: 0 0 10px 0;
            }

            .target-schools,
            .target-majors {
                margin-bottom: 15px;
            }

            .target-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }
        }
    }

    &.hire-positions-card {
        .positions-list {
            .position-details {
                padding: 10px;

                .position-item {
                    margin-bottom: 15px;

                    .item-label {
                        font-weight: 600;
                        margin-bottom: 5px;
                    }

                    .item-content {
                        color: #606266;
                        line-height: 1.6;

                        &.requirements {
                            white-space: pre-line;
                        }
                    }

                    .major-tag {
                        margin-right: 8px;
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }

    &.company-info-card {
        .company-intro {
            line-height: 1.8;
        }
    }

    &.hire-location-card {
        .address-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .el-icon {
                margin-right: 8px;
                color: #409eff;
            }
        }

        .map-container {
            height: 300px;

            .map-placeholder {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.sidebar-card {
    margin-bottom: 20px;

    &.apply-card {
        .apply-container {
            .hr-info {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .hr-avatar {
                    margin-right: 10px;
                }

                .hr-details {
                    flex: 1;

                    .hr-name {
                        font-weight: 600;
                        margin-bottom: 3px;
                    }

                    .hr-position {
                        font-size: 14px;
                        color: #666;
                    }
                }

                .hr-status {
                    color: #409eff;
                    font-size: 14px;
                }
            }

            .apply-options {
                margin-bottom: 15px;
            }

            .apply-button-container {
                margin-top: 20px;

                .reminder-btn {
                    margin-top: 10px;

                    .el-icon {
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    &.related-events-card {
        .related-events-list {
            .related-event-item {
                padding: 12px;
                border-bottom: 1px solid #eee;
                cursor: pointer;
                transition: all 0.3s;

                &:last-child {
                    border-bottom: none;
                }

                &:hover {
                    background-color: #f5f7fa;
                }

                .event-company {
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;

                    .company-name {
                        margin-left: 10px;
                        font-weight: 600;
                    }
                }

                .event-title {
                    font-size: 16px;
                    margin-bottom: 8px;
                    color: #303133;
                }

                .event-meta {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    color: #606266;
                    margin-bottom: 8px;

                    .event-time {
                        display: flex;
                        align-items: center;

                        .el-icon {
                            margin-right: 5px;
                            font-size: 16px;
                        }
                    }
                }

                .event-tags {
                    .event-tag {
                        margin-right: 8px;
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
}

.full-width-button {
    width: 100%;
}

// 响应式适配
@media (max-width: 768px) {
    .hire-title-section {
        flex-direction: column;
        align-items: flex-start;

        .hire-action-buttons {
            margin-top: 15px;
            width: 100%;

            .apply-button {
                flex: 1;
            }
        }
    }
}
</style>
